<!--
 * @Author: zhayang
 * @LastEditors: DeluxePig 250293786@qq.com
 * @Date: 2024-06-23 22:08:36
 * @LastEditTime: 2024-08-13 23:00:11
 * @Description: 编辑模型
-->
<template>
  <FormLayout title="编辑模型">
    <el-tabs v-model="active" class="fit model-page-box">
      <el-tab-pane label="基础信息" name="0" class="fit">
        <el-form key="step1" ref="firstForm" v-loading="loading" label-position="top" label-width="80px" class="fit"
          :rules="{
            title: {
              required: true,
              message: '请输入模型名称',
              trigger: 'blur'
            }
          }" :model="formState">
          <el-form-item label="模型名称" prop="title">
            <el-input v-model="formState.title" clearable size="medium" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="模型说明" prop="intro">
            <el-input v-model="formState.intro" type="textarea" clearable size="medium"
              :autosize="{ minRows: 2, maxRows: 6 }" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="视频模板" name="1" class="fit" lazy>
        <TwoStep key="step2" ref="TwoRef" :cache-data="cacheData" :model-uniqueid="formState.model_uniqueid" />
      </el-tab-pane>
      <el-tab-pane label="文案和视频" name="2" class="fit">
        <ThreeStep key="step3" ref="ThreeRef" :cache-data="cacheData" :model-uniqueid="formState.model_uniqueid" />
      </el-tab-pane>
      <el-tab-pane label="收费设置" name="3" class="fit">
        <FourStep key="step4" ref="FourRef" :cache-data="cacheData" :model-uniqueid="formState.model_uniqueid" />
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="55%">
      您未设置视频模版，后续步骤无法使用“一键生成”视频功能。确定跳过视频模版设置？
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">
          去设置
        </el-button>
        <el-button type="primary" size="small" @click="turnToThree">
          暂不设置
        </el-button>
      </span>
    </el-dialog>
    <template #footer>
      <el-button size="small" @click="back">
        返回列表
      </el-button>
      <el-button v-if="formState.model_uniqueid" size="small" :loading="loading" @click="temporarySave">
        暂存
      </el-button>
      <el-button v-if="active !== '0'" type="primary" size="small" :loading="loading" @click="backPre">
        上一步
      </el-button>
      <el-button v-if="active !== '3'" type="primary" size="small" :loading="loading" @click="next">
        下一步
      </el-button>
      <el-button v-if="active === '3'" type="primary" size="small" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </FormLayout>
</template>

<script>
import FormLayout from '@/components/bmp/layout/form-layout.vue'
import TwoStep from './components/two-step.vue'
import ThreeStep from './components/three-step.vue'
import FourStep from './components/four-step.vue'
import { editModel, holdModel, modelDet } from '@/api/model'
import { Loading } from 'element-ui'
export default {
  components: {
    FormLayout,
    TwoStep,
    ThreeStep,
    FourStep
  },
  data() {
    return {
      options: [
        {
          title: '基础信息',
          value: 1
        },
        {
          title: '视频模板',
          value: 2
        },
        {
          title: '文案和视频',
          value: 3
        },
        {
          title: '收费设置',
          value: 4
        }
      ],
      active: '0',
      formState: {
        model_uniqueid: '',
        title: '',
        intro: ''
      },
      cacheData: {},
      loading: false,
      dialogVisible: false
    }
  },
  created() {
    if (this.$route?.query?.uid) {
      this.formState.model_uniqueid = this.$route.query?.uid
      const loadingInstance = Loading.service({
        text: '正在获取模型详情'
      })
      modelDet({ model_uniqueid: this.formState.model_uniqueid })
        .then((res) => {
          if (res && res.code === 0) {
            const data = res?.data
            this.cacheData = data
            this.formState.title = data.title
            this.formState.intro = data.intro
          }
        })
        .finally(() => {
          this.$nextTick(() => {
            loadingInstance.close()
          })
        })
    }
  },
  methods: {
    back() {
      this.$router.replace({
        path: 'model-list'
      })
    },
    // 上一步
    backPre() {
      if (this.active !== '0') {
        const number = +this.active - 1
        this.active = String(number)
      }
    },
    // 下一步
    next() {
      if (this.active === '0') {
        this.$refs.firstForm.validate((valid) => {
          if (valid) {
            this.loading = true
            if (
              this.formState.title !== this.cacheData.title ||
              this.formState.intro !== this.cacheData.intro
            ) {
              editModel({
                ...this.formState
              })
                .then((res) => {
                  if (res.code === 0) {
                    this.active = '1'
                  }
                })
                .catch(() => {
                  this.$message.error('保存错误，请重试')
                })
                .finally(() => {
                  this.loading = false
                })
            } else {
              this.active = '1'
              this.loading = false
            }
          } else {
            this.$message.warning('请填写必填项！')
            return false
          }
        })
      } else if (this.active === '1') {
        this.loading = true
        this.$refs.TwoRef.finish()
          .then((res) => {
            if (res) {
              modelDet({ model_uniqueid: this.formState.model_uniqueid })
                .then((res) => {
                  if (res && res.code === 0) {
                    if (res && res.code === 0) {
                      this.cacheData = res?.data
                    }
                  }
                })
                .finally(() => {
                  this.active = '2'
                })
            }
          })
          .catch(() => {
            this.dialogVisible = true
          })
          .finally(() => {
            this.loading = false
          })
      } else if (this.active === '2') {
        this.active = '3'
      }
    },
    turnToThree() {
      this.dialogVisible = false
      this.active = '2'
    },
    // 暂存
    temporarySave() {
      let payload = ''
      if (this.active === '0') {
        payload = JSON.stringify(this.formState)
      }
      holdModel({
        payload: payload,
        option: 0,
        model_uniqueid: this.formState.model_uniqueid
      })
        .then((res) => {
          if (res.code === 0) {
            this.$message.success('暂存成功')
          }
        })
        .catch(() => {
          this.$message.error('暂存失败，请重试')
        })
    },
    // 保存
    save() {
      if (this.active === '3') {
        this.loading = true
        this.$refs.FourRef.submit()
          .then((res) => {
            editModel({
              ...res,
              ...this.formState,
              enable_status: 1
            })
              .then((data) => {
                if (data.code === 0) {
                  this.$message.success('保存成功，正在跳转模型列表...')
                  this.$router.replace({
                    path: 'model-list'
                  })
                }
              })
              .catch((e) => {
                console.log(e.message)
                this.$message.error('保存错误，请重试')
              })
              .finally(() => {
                this.loading = false
              })
          })
          .finally(() => {
            this.loading = false
          })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-tabs__content {
    height: calc(100% - 65px);
    min-height: 650px;
  }
}
</style>
